// import produce from 'immer'
import { useHandler } from '@cfe/hooks';
import { InputNumber } from 'antd';

const shouldDisabled = ({ checkData, max, min }) => {
  const { range } = checkData;
  if (max - min > range) return true;
  if (max < min) return true;
  return false;
};

// 实际上这个组件并不通用，不过似乎也不会有其他什么 case，姑且定制一下
const RangeSeletor = ({ value = [], onChange, checkData }) => {
  const { minMax, minMin, maxMin, maxMax } = checkData;
  const handleChange = useHandler(({ start: nextStart, end: nextEnd }) => {
    const isDisabled = shouldDisabled({
      checkData,
      max: nextEnd ?? value[1],
      min: nextStart ?? value[0],
    });
    if (isDisabled) return;
    onChange([nextStart ?? value[0], nextEnd ?? value[1]]);
  });

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        开始时间：
        <InputNumber
          addonBefore="近"
          addonAfter="天开始"
          onChange={(v) => handleChange({ end: v })}
          value={value?.[1]}
          style={{ width: '160px' }}
          min={minMax}
          max={maxMax}
        />
      </div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        结束时间：
        <InputNumber
          addonBefore="近"
          addonAfter="天结束"
          onChange={(v) => handleChange({ start: v })}
          value={value?.[0]}
          style={{ width: '160px' }}
          min={minMin}
          max={maxMin}
        />
      </div>
    </div>
  );
};

export default RangeSeletor;
